<template>
  <transition name="fade">
    <div class="header-menu -pos-f -w100p -z100" v-show="props.show">
      {{ props.menuInfo }}
    </div>
  </transition>
</template>

<script lang="ts" setup>
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  menuInfo: {
    type: Object as PropType<RouteItem>,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.header-menu {
  top: $navigation-head-height;
  min-height: 300px;
  background-color: var(--head-nav-bg);
  transform-origin: top;
  transition: transform .2s;
}
.fade-enter-active {
  transform: scaleY(0);
}
.fade-leave-active {
  transform: scaleY(0);
}
</style>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Menu",
});
</script>
